<template>
	<view class="box">
		<view class="row">
			<text>手机号</text>
			<input type="text" v-model="phone" maxlength="12" />
		</view>
		<view class="row">
			<view class="send">
				<button size="mini" :disabled="!codeTag" class="captcha" @click="sendCode">验证码</button>
				<text>{{second}}</text>
			</view>
			<input type="text" v-model="code" placeholder="- - - -" maxlength="4" />
		</view>
		<view class="row">
			<text style="font-size: 23rpx;">收不到验证码？试试 <text style="color:#00BB00;font-size: 23rpx;"> 语音验证</text></text>
			<!--   -->
			<button type="primary" style="width: 90%;border-radius: 80rpx;margin-top: 50rpx;"
			 @click="doLogin"
			  :disabled="!loginTag"
			 
			 >登录</button>
		</view>
		<view class="row">
			<text style="color: #006699;text-align: center;">通过微信授权登录</text>
		</view>
	</view>
</template>

<script>
	const app=getApp()
	export default {
		data() {
			return {
				phone:"",		//手机号
				code:"",		//用户输入的验证码
				codeTag:false,		//true 验证码按钮可以点击；false 不可以点击
				loginTag:false,		//true 登录按钮可以点击；false 不可以点击
				second:"",			//倒计时的数字
			
			}
		},
		watch:{
			//检测phone
			phone:function(val){
				// console.log(val);
				let result = /^1[3456789]\d{9}$/.test(val)
				this.codeTag=result;
				
			},
			//修改login按钮的状态
			code:function(val){
				if(val.length==4){
					this.loginTag=true;
				}else{
					this.loginTag=false;
				}
			}
			
		},
		methods:{
			//发送验证码
			async sendCode(){
				//显示倒计时
				let second=5;
				this.second=second;
				let timer=setInterval(()=>{
					second--
					this.second=second
					//60秒钟到期，清除定时器
					if(second==0){
						this.codeTag=true;
						this.second="";
						clearInterval(timer)
						
					}
				},1000)
				this.codeTag=false;			//验证码按钮不可点击
				//获取验证码
				let result =await this.$http({url:"api/sms",data:{phone:this.phone}}).catch(err=>{
					console.error(err)
				})
				//获取争取的验证码，存储在缓存里面
				let code=result.data.list.code;
				uni.setStorageSync("code",code)
			},
			//执行登录
			async doLogin(){
				//读取正确的验证码
				let code=uni.getStorageSync("code")
				//比对验证码是否正确
				if(this.code==code){
					//执行登录
					let result =await this.$http({url:"api/wxlogin",data:{phone:this.phone}})
						.catch(err=>{
						console.error(err)
					})
					// 获取到用户的uid和token，存储在客户端
					uni.setStorageSync("userInfo",result.data.list)
					
					//修改登录状态
					// app.globalData.isLogin=true
					uni.setStorageSync("isLogin",true)
					
					//提示用户
					uni.showToast({
						title:"成功登录",
						mask:true
					})
					setTimeout(()=>{
						//跳转到mine页面
						uni.reLaunch({
							url:"/pages/mine/mine"
						})
						
					},1500)
					
				}
			}
		}
	}
</script>

<style>
	/* 导入外部的样式文件 */
	/* @import url("../../common/css/index.css"); */
	.box {
		position: relative;
	}

	.row {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		margin: 40rpx;
	}

	.send {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.send text:nth-of-type(2) {
		color: #00BB00;
	}

	text {
		font-size: 27rpx;
		margin-bottom: 10rpx;
	}

	input {
		border-bottom: 1rpx solid gray;
		height: 65rpx;
	}

	.captcha {
		background: #007cfe;
		color: white;
		padding: 10rpx 20rpx;
		border-radius: 13rpx;
		margin: 0rpx;
	}
</style>
